<template>
  <div class>
    <div class="msg_tabs">
      <div :class="{im_active:index==0}" @click="toZiLiao(0)">聊天</div>
      <div :class="{im_active:index==1}" @click="toZiLiao(1)" v-if="chat_userinfo.uid">会员资料</div>
    </div>
    <div class="user_ziliao">
      <div class="user_ziliao_1">
        <div>昵称：{{chat_userinfo.nickname || '未知'}}</div>
        <div>用户id：{{chat_userinfo.uid || '未知'}}</div>
        <div>会员等级：{{chat_userinfo.rating_cn || '未知'}}</div>
        <div>推荐人：{{chat_userinfo.share || '未知'}}</div>
        <div>
          备注:
          <input
            type="text"
            :value="chat_userinfo.admin_remark"
            @focus="focus_remark($event)"
            @blur="change_remark(chat_userinfo.uid ,$event)"
          />
        </div>
      </div>
      <div class="user_attention" v-if="chat_userinfo.uid">
        <el-button
          :loading="$store.state.isLoading"
          v-show="is_attention == 0"
          type="danger"
          size="mini"
          style="width: 80px;text-align: center"
          @click="btn_attention(chat_userinfo.uid )"
        >关注</el-button>
        <el-button
          :loading="$store.state.isLoading"
          v-show="is_attention == 1 "
          type="primary"
          size="mini"
          style="width: 80px ;text-align: center"
          @click="btn_attention(chat_userinfo.uid )"
        >已关注</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      im_active: 0,
      index: 0,
      user: {},
      remark: true,
      is_attention: 1,
      sel_user: ""
    };
  },
  components: {},
  created() {
    // this.getUserInfo(id);
  },
  mounted() {
    this.$bus.$on("selectUser", id => {
    //   this.getBusUser(id);
    });
  },
  computed: {
    ...mapState({
      chat_userinfo: state => state.conversation.chat_userinfo
    })
  },
  watch: {
    chat_userinfo(old) {
      this.toZiLiao(0);
      this.index = 0;
      // this.index = 0;
      if (!old.uid) {
        this.$swal("请检查当前用户是否存在", "出错啦！", "success");
      } else {
        if (
          old.is_im_attention == "" ||
          old.is_im_attention == null ||
          old.is_im_attention == undefined ||
          old.is_im_attention == 0
        ) {
          this.is_attention = 0; //未关注
        } else {
          this.is_attention = 1; //已关注
        }
      }
    }
  },
  methods: {
    toZiLiao(index) {
      this.index = index;
      this.$emit("toImTabs", index);
      if (index == 1) {
        this.$bus.$emit("toUserInfo", this.chat_userinfo);
      }
    },
    getBusUser(imuid) {
      this.sel_user = imuid;
      this.getUserInfo(imuid);
    },
    getUserInfo(imuid) {
      var params = {};
      params.im_uid = imuid;
      this.$api.getim.getImUserInfo(params).then(res => {
        if (res.data.code == 200) {
          this.user = res.data.result;
          if (res.data.result.id) {
            this.$store.commit("set_chat_userinfo", res.data.result);
            if (!res.data.result.uid) {
              // this.$swal("请检查当前用户是否存在", "出错啦！", "success");
            } else {
              if (
                res.data.result.is_im_attention == "" ||
                res.data.result.is_im_attention == null ||
                res.data.result.is_im_attention == undefined ||
                res.data.result.is_im_attention == 0
              ) {
                this.is_attention = 0; //未关注
              } else {
                this.is_attention = 1; //已关注
              }
            }

            // this.$bus.$emit("toUserInfo", res.data.result);
          } else {
            this.user = {};
            this.$store.commit("set_chat_userinfo", {});
          }
        }
      });
    },
    btn_attention(uid) {
      //是否关注
      var flag = this.is_attention;
      if (flag == 0) {
        flag = 1;
      } else {
        flag = 0;
      }
      this.$api.getim
        .im_attention({ id: uid, is_im_attention: flag })
        .then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.getUserInfo(this.chat_userinfo.conversationID);
          } else {
            this.$fnc.alertError("操作失败");
            this.getUserInfo(this.chat_userinfo.conversationID);
          }
        });
    },

    focus_remark(e) {
      e.currentTarget.select();
    },
    change_remark(uid) {
      this.$api.getim
        .modify_remark({ id: uid, admin_remark: this.remark })
        .then(res => {
          if (res.data.code == 200) {
            // this.$swal("修改成功！", "您已经成功修改了备注。", "success");
          } else {
            this.$swal("修改失败！", "出错啦！", "success");
          }
        });
    }
  }
};
</script>
<style lang='less' scoped>
.msg_tabs {
  height: 60px;
  background: #f9fafb;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  padding-left: 15px;

  > div {
    height: 50px;
    width: 120px;
    position: relative;
    z-index: 13;
    position: relative;
    display: inline-block;
    // padding: .3em 1em 0;
    padding-top: 20px;
    cursor: pointer;
    margin: 0 -4px;
  }
  > div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #f9fafb;
    border: 1px solid #eef0f5;
    border-bottom: none;
    border-radius: 0.5em 0.5em 0 0;
    transform: perspective(1.5em) rotateX(5deg);
    transform-origin: bottom;
  }
  .im_avatar {
    z-index: 16;
  }
  .im_active::before {
    background: #fff;
  }
}
.user_ziliao {
  // position: absolute;
  width: 100%;
  top: 0;
  padding: 15px 40px;
  border-bottom: 1px solid #f2f5fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user_ziliao_1 {
  display: flex;
  align-items: center;
  > div {
    margin-right: 30px;
    text-align: left;
  }
}
</style>
